<!DOCTYPE html>
<html>
{include file='public/header'}
<style>
    .layui-card{border: 1px solid #ececec;}
    .message{margin-top: 5px;}
    .layui-table-cell{height:auto}
    .layui-table-total tr{ background-color:#fff !important;}
    .layui-table-total{ border-bottom: 1px solid #e6e6e6 !important;}
    #user_token{font-weight: bold;display: inline-flex;align-items: cente;}
    .common{display: none;}
</style>
<body>
    <div class="x-body">
        <blockquote class="layui-elem-quote">
            <span class="x-red" id="username"></span>
             ，您好 ！
        </blockquote>
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header flex">
                        <div style="display: flex;">
                            <b>今天</b>
                            <div style="display: flex;align-items: center;">
                                <div style="margin:0 10px">
                                    pv<i class="layui-icon iconfont icon-lytishi1" id="pv_tip"></i>:<span id="pv">0</span>
                                </div>
                                <div>
                                    uv<i class="layui-icon iconfont icon-lytishi1" id="uv_tip"></i>:<span id="uv">0</span>
                                </div>
                            </div>
                        </div>
                        <div style="color: #ccc;" id="timers">
                            300秒后刷新
                        </div>
                    </div>
                    <div class="layui-card-body" style="border-bottom: 1px solid #f6f6f6;">
                        <div class="flex">
                            <div>
                                <div>今日充值<i class="layui-icon iconfont icon-lytishi1" id="to_day_recharge_tip"></i></div>
                                <p class="layui-font-green">¥<span id="to_day_recharge">0</span></p>
                            </div>
                            <div>
                                <div>新用户充值<i class="layui-icon iconfont icon-lytishi1" id="to_day_new_user_recharge_tip"></i></div>
                                <p class="layui-font-green">¥<span id="to_day_new_user_recharge">0</span></p>
                            </div>
                            <!-- <div class="common">
                                <div>分成收益<i class="layui-icon iconfont icon-lytishi1" id="to_day_profit_tip"></i></div>
                                <p class="layui-font-green">¥<span id="to_day_profit">0</span></p>
                            </div> -->
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <div class="flex">
                            <div>
                                <div>普通充值<i class="layui-icon iconfont icon-lytishi1" id="to_day_ordinary_recharge_tip"></i></div>
                                <p class="layui-font-green">¥<span id="to_day_ordinary_recharge">0</span></p>
                                <div class="message">
                                    <div>已支付：<span id="to_day_ordinary_paid">0</span>笔</div>
                                    <div>未支付：<span id="to_day_ordinary_unpaid">0</span>笔</div>
                                    <div>完成率：<span id="to_day_ordinary_finish">0</span>%</div>
                                </div>
                            </div>
                            <div>
                                <div>VIP会员<i class="layui-icon iconfont icon-lytishi1" id="to_day_member_recharge_tip"></i></div>
                                <p class="layui-font-green">¥<span id="to_day_member_recharge">0</span></p>
                                <div class="message">
                                    <div>已支付：<span id="to_day_member_paid">0</span>笔</div>
                                    <div>未支付：<span id="to_day_member_unpaid">0</span>笔</div>
                                    <div>完成率：<span id="to_day_member_finish">0</span>%</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header flex">
                        <div>
                            <b>昨天</b>
                        </div>
                    </div>
                    <div class="layui-card-body" style="border-bottom: 1px solid #f6f6f6;">
                        <div class="flex">
                            <div>
                                <div>充值</div>
                                <p class="layui-font-green">¥<span id="yester_day_recharge">0</span></p>
                            </div>
                            <!-- <div class="common">
                                <div>分成收益</div>
                                <p class="layui-font-green">¥<span id="yester_day_profit">0</span></p>
                            </div> -->
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <div class="flex">
                            <div>
                                <div>普通充值</div>
                                <p class="layui-font-green">¥<span id="yester_day_ordinary_recharge">0</span></p>
                                <div class="message">
                                    <div>已支付：<span id="yester_day_ordinary_paid">0</span>笔</div>
                                    <div>未支付：<span id="yester_day_ordinary_unpaid">0</span>笔</div>
                                    <div>完成率：<span id="yester_day_ordinary_finish">0</span>%</div>
                                </div>
                            </div>
                            <div>
                                <div>VIP会员</div>
                                <p class="layui-font-green">¥<span id="yester_day_member_recharge">0</span></p>
                                <div class="message">
                                    <div>已支付：<span id="yester_day_member_paid">0</span>笔</div>
                                    <div>未支付：<span id="yester_day_member_unpaid">0</span>笔</div>
                                    <div>完成率：<span id="yester_day_member_finish">0</span>%</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header flex">
                        <div>
                            <b>本月（不含当日）</b>
                        </div>
                    </div>
                    <div class="layui-card-body" style="border-bottom: 1px solid #f6f6f6;">
                        <div class="flex">
                            <div>
                                <div>充值</div>
                                <p class="layui-font-green">¥<span id="this_month_recharge">0</span></p>
                            </div>
                            <!-- <div class="common">
                                <div>分成收益</div>
                                <p class="layui-font-green">¥<span id="this_month_profit">0</span></p>
                            </div> -->
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <div class="flex">
                            <div>
                                <div>普通充值</div>
                                <p class="layui-font-green">¥<span id="this_month_ordinary_recharge">0</span></p>
                                <div class="message">
                                    <div>已支付：<span id="this_month_ordinary_paid">0</span>笔</div>
                                    <div>未支付：<span id="this_month_ordinary_unpaid">0</span>笔</div>
                                    <div>完成率：<span id="this_month_ordinary_finish">0</span>%</div>
                                </div>
                            </div>
                            <div>
                                <div>VIP会员</div>
                                <p class="layui-font-green">¥<span id="this_month_member_recharge">0</span></p>
                                <div class="message">
                                    <div>已支付：<span id="this_month_member_paid">0</span>笔</div>
                                    <div>未支付：<span id="this_month_member_unpaid">0</span>笔</div>
                                    <div>完成率：<span id="this_month_member_finish">0</span>%</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header flex">
                        <div>
                            <b>累计（不含当日）</b>
                        </div>
                    </div>
                    <div class="layui-card-body" style="border-bottom: 1px solid #f6f6f6;">
                        <div class="flex">
                            <div>
                                <div>充值</div>
                                <p class="layui-font-green">¥<span id="total_recharge">0</span></p>
                            </div>
                            <!-- <div class="common">
                                <div>分成收益</div>
                                <p class="layui-font-green">¥<span id="total_profit">0</span></p>
                            </div> -->
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <div class="flex">
                            <div>
                                <div>普通充值</div>
                                <p class="layui-font-green">¥<span id="total_ordinary_recharge">0</span></p>
                                <div class="message">
                                    <div>已支付：<span id="total_ordinary_paid">0</span>笔</div>
                                    <div>未支付：<span id="total_ordinary_unpaid">0</span>笔</div>
                                    <div>完成率：<span id="total_ordinary_finish">0</span>%</div>
                                </div>
                            </div>
                            <div>
                                <div>VIP会员</div>
                                <p class="layui-font-green">¥<span id="total_member_recharge">0</span></p>
                                <div class="message">
                                    <div>已支付：<span id="total_member_paid">0</span>笔</div>
                                    <div>未支付：<span id="total_member_unpaid">0</span>笔</div>
                                    <div>完成率：<span id="total_member_finish">0</span>%</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <table id="rechargeStatistics" lay-filter="rechargeStatistics"></table>
    </div>

    <script>
        function finish(data){
            let {
                // 今天普通充值完成/未完成
                to_day_ordinary_paid,to_day_ordinary_unpaid,
                // 今天会员充值完成/未完成
                to_day_member_paid,to_day_member_unpaid,
                // 昨天普通充值完成/未完成
                yester_day_ordinary_paid,yester_day_ordinary_unpaid,
                // 昨天会员充值完成/未完成
                yester_day_member_paid,yester_day_member_unpaid,
                // 本月普通充值完成/未完成
                this_month_ordinary_paid,this_month_ordinary_unpaid,
                // 本月会员充值完成/未完成
                this_month_member_paid,this_month_member_unpaid,
                // 累计普通充值完成/未完成
                total_ordinary_paid,total_ordinary_unpaid,
                // 累计会员充值完成/未完成
                total_member_paid,total_member_unpaid,
            } = data.data
            data.data.to_day_ordinary_finish = Percentage(to_day_ordinary_paid,to_day_ordinary_paid+to_day_ordinary_unpaid);//今天普通充值完成率
            data.data.to_day_member_finish = Percentage(to_day_member_paid,to_day_member_paid+to_day_member_unpaid);//今天会员充值完成率
            data.data.yester_day_ordinary_finish = Percentage(yester_day_ordinary_paid,yester_day_ordinary_paid+yester_day_ordinary_unpaid);//昨天普通充值完成率
            data.data.yester_day_member_finish = Percentage(yester_day_member_paid,yester_day_member_paid+yester_day_member_unpaid);//昨天会员充值完成率
            data.data.this_month_ordinary_finish = Percentage(this_month_ordinary_paid,this_month_ordinary_paid+this_month_ordinary_unpaid);//本月普通充值完成率
            data.data.this_month_member_finish = Percentage(this_month_member_paid,this_month_member_paid+this_month_member_unpaid);//本月会员充值完成率
            data.data.total_ordinary_finish = Percentage(total_ordinary_paid,total_ordinary_paid+total_ordinary_unpaid);//累计普通充值完成率
            data.data.total_member_finish = Percentage(total_member_paid,total_member_paid+total_member_unpaid);//累计会员充值完成率
            var keys = Object.keys(data.data);
            for (var i = 0; i < keys.length; i++) {
                if(data.data[keys[i]]){
                    $(`#${keys[i]}`).html(data.data[keys[i]])
                }
            }
        }
        Ajax('/cps/Index/orderStatistics', {
            is_first:1
        }).then(data => {
            finish(data)
        });
        // 定时器
        var timer;
        var wait = 300;
        $('#timers').html(wait + '秒后刷新');
        wait--;
        timer = setInterval(function () {
            $('#timers').html(wait + '秒后刷新');
            wait--;

            if (wait < 0) {
                // window.clearTimeout(timer)
                // 数据统计
                Ajax('/cps/Index/orderStatistics', {is_first:0}).then(data => {
                    finish(data)
                });
                wait = 300
            }
        }, 1000);
        let params = {
            elem: '#rechargeStatistics'
            , url: '/cps/Index/rechargeStatistics' //数据接口
            , id: 'rechargeStatistics'
            , page:false
            , toolbar:true
            , totalRow:true
            // , height:700
            , cols: [[ //表头
                { field: 'date', title: '日期',totalRowText: '合计：', align:'center'}
                , { field: 'pv', title: 'pv', totalRow: '{{= d.TOTAL_NUMS }}', align:'center'}
                , { field: 'uv', title: 'uv', totalRow: '{{= d.TOTAL_NUMS }}', align:'center'}
                , { field: 'totalRecharge', title: '累计充值', totalRow: '￥{{= (d.TOTAL_NUMS).toFixed(2) }}', align:'center'}
            ]],
            parseData:function (res) { //res 即为原始返回的数据
                if(res.code == 200){
                    return {
                        "data": res.data.data, //解析数据列表
                        "code": res.code, //解析接口状态
                        'count':0//解析数据长度
                    };
                }
            },
        }
        Ajax('/cps/Index/rechargeStatistics').then(res=>{
            return res.data.type
        }).then(type=>{
            if(type === 1){
                tableList(params)
            }else{
                params.cols[0].push(
                    {title: '普通充值', field: 'ordinaryRecharge', totalRow: '￥{{= (d.TOTAL_NUMS).toFixed(2) }}', templet: function (d) {
                            return `<div>￥${d.ordinaryRecharge}</div><div>成功人次：${d.ordinary_successPersonTime}</div><div>人均：${perCapita(d.ordinaryRecharge,d.ordinary_successPersonTime)}</div>`
                        }, align:'center'
                    }
                    , {title: '普通充值订单', field: 'ordinary_paid', totalRow: '{{= (d.TOTAL_NUMS).toFixed() }}', templet: function (d) {
                            return `<div>已支付：${d.ordinary_paid}</div><div>未支付：${d.ordinary_unpaid}</div><div>完成率：${Percentage(d.ordinary_paid,d.ordinary_paid+d.ordinary_unpaid)}%</div>`
                        }, align:'center'
                    }
                    , {title: 'VIP会员', field: 'memberRecharge', totalRow: '￥{{= (d.TOTAL_NUMS).toFixed(2) }}', templet: function (d) {
                            return `<div>￥${d.memberRecharge}</div><div>成功人次：${d.memberSuccessPersonTime}</div><div>人均：￥${perCapita(d.memberRecharge,d.memberSuccessPersonTime)}</div>`
                        }, align:'center'
                    }
                    , {title: 'VIP会员订单', field: 'memberPaid', totalRow: '{{= (d.TOTAL_NUMS).toFixed() }}', templet: function (d) {
                            return `<div>已支付：${d.memberPaid}</div><div>未支付：${d.memberUnPaid}</div><div>完成率：${Percentage(d.memberPaid,d.memberPaid+d.memberUnPaid)}%</div>`
                        }, align:'center'
                    }
                )
                tableList(params)
            }
        })
        
        // if(is_distributor === 0 && !pid){
        //     $(".common").show()
        //     params.cols[0].push({ field: 'profit', title: '分成收益',  totalRow: '{{= (d.TOTAL_NUMS).toFixed(2) }}', align:'center'})
        // }else{
        //     $(".common").hide()
        // }
        
        $("#username").html(JSON.parse(localStorage.getItem('cpsMessage')).name)
        // tip提示
        tips('#to_day_recharge_tip','#to_day_recharge_tip','今日用户充值（包含历史用户在今日充值）')
        tips('#to_day_new_user_recharge_tip','#to_day_new_user_recharge_tip','今日激活用户充值')
        tips('#to_day_profit_tip','#to_day_profit_tip','今日短剧分成收益')
        tips('#to_day_ordinary_recharge_tip','#to_day_ordinary_recharge_tip','今日激活用户非会员累计充值')
        tips('#to_day_member_recharge_tip','#to_day_member_recharge_tip','今日激活用户会员累计充值')
        tips('#pv_tip','#pv_tip','今日登录次数')
        tips('#uv_tip','#uv_tip','今日登录人数')
    </script>
</body>

</html>